<!--  -->
<template>
  <el-container>
    <el-header class="clearfix">
      <div class="header-inner">
        <a
          class="site-logo"
          href="http://www.meituan.com"
        >美团</a>
        <div class="header-right">
          <span>已有美团账号？</span>
          <el-button
            type="success"
            size="small"
          >登陆</el-button>
        </div>
      </div>
    </el-header>
    <el-main>
      <div class="main-inner">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item
            label="昵称"
            prop="name"
          >
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>

          <el-form-item
            label="邮箱"
            prop="email"
          >
            <el-input v-model="ruleForm.email"></el-input>
            <el-button
              size="mini"
              round
              @click='sendMsg'
            >发送验证码</el-button>
            <span class="status">{{statusMsg}}</span>
          </el-form-item>

          <el-form-item
            label="验证码"
            prop="code"
          >
            <el-input v-model="ruleForm.code"></el-input>
          </el-form-item>

          <el-form-item
            label="密码"
            prop="pass"
          >
            <el-input
              type="password"
              v-model="ruleForm.pass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="确认密码"
            prop="checkPass"
          >
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-button
            type='primary'
            @click="register"
            class="btnReg"
          >同意以下协议并注册</el-button>
          <div class="error">{{error}}</div>
          <a
            class="f1"
            href="http://www.meituan.com/about/terms"
            target="_blank"
          >《美团网用户协议》</a>
        </el-form>
      </div>
    </el-main>
    <el-footer>
      <p>©meituan.com 京ICP证070791号 京公网安备11010502025545号</p>
    </el-footer>
  </el-container>
</template>

<script>
import CryptoJS from "crypto-js";
export default {
  layout: "blank",
  data() {
    return {
      statusMsg: "",
      error: "",
      ruleForm: {
        name: "",
        email: "",

        code: "",
        pass: "",
        checkPass: ""
      },
      rules: {
        name: [
          {
            required: true,
            type: "string",
            message: "请输入活动名称",
            trigger: "blur"
          },
          { min: 6, max: 10, message: "长度在 6 到 10 个字符", trigger: "blur" }
        ],
        email: [
          {
            required: true,
            type: "email",
            message: "请输入合法的邮箱地址",
            trigger: "blur"
          }
          // {
          //   type: "email",
          //   message: "请输入合法的邮箱地址",
          //   trigger: "blur,change"
          // }
        ],
        // code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        pass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ],
        checkPass: [
          {
            required: true,
            message: "请输入确认密码",
            trigger: "blur"
          },
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请输入密码"));
              } else if (value !== this.ruleForm.pass) {
                callback(new Error("两次输入密码不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    sendMsg() {
      const self = this;
      let namePass;
      let emailPass;
      if (self.timerid) {
        return false;
      }
      this.$refs["ruleForm"].validateField("name", valid => {
        namePass = valid;
      });
      self.statusMsg = "";
      if (namePass) {
        return false;
      }
      this.$refs["ruleForm"].validateField("email", valid => {
        emailPass = valid;
      });
      if (!namePass && !emailPass) {
        self.$axios
          .post("/users/verify", {
            username: encodeURIComponent(self.ruleForm.name),
            email: self.ruleForm.email
          })
          .then(({ status, data }) => {
            if (status === 200 && data && data.code === 0) {
              let count = 60;
              self.statusMsg = `验证码已发送,剩余${count--}秒`;
              self.timerid = setInterval(function() {
                self.statusMsg = `验证码已发送,剩余${count--}秒`;
                if (count === 0) {
                  clearInterval(self.timerid);
                }
              }, 1000);
            } else {
              self.statusMsg = data.msg;
            }
          })
          .catch(err => console.error(err));
      }
    },
    register() {
      let self = this;
      self.$refs["ruleForm"].validate(valid => {
        if (valid) {
          self.$axios
            .post("/users/signup", {
              username: window.encodeURIComponent(self.ruleForm.name),
              password: CryptoJS.MD5(self.ruleForm.pass).toString(),
              email: self.ruleForm.email,
              code: self.ruleForm.code
            })
            .then(({ status, data }) => {
              if (status === 200) {
                if (data && data.code === 0) {
                  location.href = "/login";
                } else {
                  self.error = data.msg;
                  console.log(data.msg);
                }
              } else {
                self.error = `服务器出错，错误码${status}`;
              }
              setTimeout(function() {
                self.error = "";
              }, 1500);
            });
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.el-container {
  background-color: #fff;
  .el-header {
    border-bottom: 2px solid #2bb8aa;
    .header-inner {
      width: 980px;
      height: 100%;
      margin: 0 auto;
    }
    a {
      float: left;
      display: block;
      width: 128px;
      width: 54px;
      height: 36px;
      line-height: 50px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .header-right {
      float: right;
      line-height: 50px;
    }
  }
  .el-main {
    .main-inner {
      width: 980px;
      margin: 0 auto;
      padding: 40px;

      .el-form {
        width: 60%;
        .btnReg {
          margin-left: 100px;
        }
        .f1 {
          margin-left: 100px;
          line-height: 30px;
        }
      }
    }
  }
  .el-footer {
    font-size: 13px;
  }
}
.clearfix {
  overflow: auto;
  _height: 1%;
}
</style>
